<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.picker.all.css"/>
    <style type="text/css">
    	.mui-input-row input,textarea::-webkit-input-placeholder{
    		text-align: right;
    	}
    	.mui-popover .mui-popover-arrow{
    		width: 0;
    		height: 0;
    	}
    	.mui-table-view:after{
    		height: 0;
    	}
    	.mui-input-group:before,.mui-input-group .mui-input-row:after{
    		left: 15px;
    		right: 15px;
    	}
    </style>
</head>
<body>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.picker.all.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    </script>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">个人信息</h1>
    </header>
    <div class="mui-content">
    	<ul class="mui-table-view">
    	    <li class="mui-table-view-cell mui-media">
    	        <a href="#setImg">
    	            <img class="mui-media-object mui-pull-right" src="img/default_user.jpeg" id="img">
    	            <div class="mui-media-body">头像</div>
    	        </a>
    	    </li>
    	</ul>
    	<div class=" mui-popover mui-popover-bottom mui-popover-action" id="setImg">
    		<ul class="mui-table-view">
    		        <li class="mui-table-view-cell" id="cap">
    		            <a class="mui-navigate-right">
    		                拍照
    		            </a>
    		        </li>
    		        <li class="mui-table-view-cell" id="select">
    		            <a class="mui-navigate-right">
    		                 从系统相册选择
    		            </a>
    		        </li>
    		    </ul>
    	</div>
        <div class="mui-input-group">
        	
        	<div class="mui-input-row" id="nickname">
        	    <label>昵称</label>
        	    <input type="text" value="海绵宝宝" readonly="readonly">
        	</div>
        	<div class="mui-input-row" style="height: auto;" id="slogan">
        	    <label>个性签名</label>
        	    <textarea readonly="readonly">I know nothing except the fact of my ignorance.</textarea>
        	</div>
        	<div id="sex" class="mui-input-row" >
        	    <label>性别</label>
        	    <input type="text" value="男" readonly="readonly">
        	</div>
        	
        	<div id="age" class="mui-input-row">
        	    <label>年龄</label>
        	    <input type="text" value="18" readonly="readonly">
        	</div>
        	
        	
        </div>
        <div class="mui-input-group mui-popover" id="setSex" >
        	<div class="mui-input-row mui-radio">
        	    <label>男</label>
        	    <input name="radio" type="radio" checked>
        	</div>
        	<div class="mui-input-row mui-radio ">
        	    <label>女</label>
        	    <input name="radio" type="radio" checked>
        	</div>
        </div>
       
    </div>
    <script type="text/javascript">
    	
    	mui.plusReady(function(){
    		document.getElementById("nickname").addEventListener("tap",function(){
    			mui.openWindow({
    				url:"setTxt.html",
    				id:"setTxt",
    				extras:{
    					type:"新昵称",
    					data:this.querySelector("input").value
    				}
    			})
    		});
    		document.getElementById("slogan").addEventListener("tap",function(){
    			mui.openWindow({
    				url:"setTxt.html",
    				id:"setTxt",
    				extras:{
    					type:"新个性签名",
    					data:this.querySelector("textarea").innerHTML
    				}
    			})
    		});
    		window.addEventListener("set",function(e){
    			var type=e.detail.type;
    			if(type=='新昵称')
    			{
    				document.getElementById("nickname").querySelector("input").value=e.detail.data;
    			}
    			else
    			{
    				document.getElementById("slogan").querySelector("textarea").innerHTML=e.detail.data;
    			}
    		});
    		document.getElementById("cap").addEventListener("tap",function(){
    		
	    		var ca=plus.camera.getCamera();
	    		ca.captureImage(function(e){
	    			var path=plus.io.convertLocalFileSystemURL(e); 
	    			document.getElementById("img").src=path;
	    			plus.gallery.save(path);
	    		},function(){
	    			mui.toast("拍照失败！");
	    		});
	    		mui("#setImg").popover("toggle");
	    		
	    	});
	    	document.getElementById("select").addEventListener("tap",function(){
	    		plus.gallery.pick(function(e){
	    			var path=plus.io.convertLocalFileSystemURL(e);
	    			document.getElementById("img").src=path;
	    		},function(){
	    			mui.toast("从系统相册选择失败!");
	    		});
	    		mui("#setImg").popover("toggle");
	    		
	    	});
	    	document.getElementById("sex").addEventListener("tap",function(){
					mui("#setSex").popover("toggle",document.getElementById("sex"));
	    	});
	    	mui("#setSex").on("tap","div",function(){
	    		mui("#setSex").popover("toggle",document.getElementById("sex"));
	    		document.getElementById("sex").querySelector("input").value=this.querySelector("label").innerHTML;
	    	});
	    	var datepick=new mui.DtPicker({type:"date",beginDate:new Date(1870,1,1),endDate:new Date()});
	    	document.getElementById("age").addEventListener("tap",function(){
	    		datepick.show(function(e){
	    			//当前日期
	    			var y=new Date().getFullYear() ;
					var  m=new Date().getMonth()+1;
					var  d=new Date().getDate();
					//出生日期
					var by=e.y.value;
					var bm=e.m.value;
					var bd=e.d.value;
					
					var age=y-by-1;
	    			if(m>bm||(m==bm&&d>=bd)) age=age+1;
	    			document.getElementById("age").querySelector("input").value=age;
	    		});
	    	});
	    		
    		
    	});
    	
    </script>
</body>
</html>
